<template>
	<view class="cart">
		<view class="address">
			<view class="add_address_btn" v-if="flag"><button type="primary" plain>请选择收货地址</button></view>
			<view class="show_address">
				<text class="iconfont icon-weizhi"></text>
				<view>
					<view class="info1">
						<text>王潇潇</text>
						<text>15884440126</text>
					</view>
					<view class="info2">四川省 成都市 武侯区 成都市武侯区金履路189号</view>
				</view>
				<text class="iconfont icon-youjiantou1"></text>
			</view>
		</view>
		<view v-if="cartList.length > 0" class="goods_info" v-for="item in cartList" :key="item.goods_id" @click="handelGoToGoodsDetail(item.goods_id)">
			<view class="content">
				<image :src="item.goods_big_logo"></image>
				<view class="infos">
					<text>{{ item.goods_name }}</text>
					<text>￥{{ item.goods_price }}</text>
					<view class="bottom">
						<text>购买数量</text>
						<view class="addBtn">
							<button type="default" size="mini" @click.stop="handelChange($event, item.goods_id)" data-operation="-1">-</button>
							<text>{{ item.num }}</text>
							<button type="default" size="mini" @click.stop="handelChange($event, item.goods_id)" data-operation="+1">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="cartList.length == 0" class="bg-image">
			<image style="width: 750rpx;height: 900rpx;" src="../../static/icon/cart.jpg"></image>
		</view>
		<view class="payment_info">
			<text>
				实付款:
				<text>￥{{ totalPrice }}</text>
			</text>
			<view class="payment_btn">立即支付</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			flag: false,
			cartList: [],
			totalPrice:null,//总价
		};
	},
	methods: {
		getCartList() {
			this.cartList = uni.getStorageSync('cart');
			this.handelComputedTotal(this.cartList);
		},
		//跳转到商品详情页面
		handelGoToGoodsDetail(goods_id) {
			uni.navigateTo({
				url: '/pages/goods-detail/goods-detail?goods_id=' + goods_id
			});
		},
		handelChange(e, goods_id) {
			const index = this.cartList.findIndex(v => v.goods_id === goods_id);
			const operation = e.currentTarget.dataset.operation;
			const cart = Object.assign(this.cartList);
			if (cart[index].num === 1 && operation == '-1') {
				uni.showModal({
					content: '你是否要删除？',
					success: (res) => {
						if (res.confirm) {
							cart.splice(index, 1);
							uni.setStorageSync('cart', cart);
							this.getCartList();
							this.handelComputedTotal(cart);
						}
					}
				});
			} else {
				// 4.修改数量
				cart[index].num += parseInt(operation);
				this.handelComputedTotal(cart);
			}
			uni.setStorageSync('cart', cart);
			this.getCartList();
		},
		//计算金额
		handelComputedTotal(cart) {
			// 总价格，总数量
			let totalPrice = 0;
			let totalNum = 0;
			
			cart.forEach(v => totalPrice += v.goods_price * v.num);

			this.totalPrice = totalPrice;
			// console.log(this.totalPrice)
			uni.setStorageSync('cart', cart);
		}
	},
	onLoad() {
		this.getCartList();
	},
	onShow() {
		this.getCartList();
	}
};
</script>

<style lang="scss" scoped>
.cart {
	background-color: #eee;
	height: calc(100vh - 40rpx -350rpx);
	margin-bottom: 125rpx;
	.address {
		.add_address_btn {
			margin: 25rpx 30rpx;
			button {
				font-weight: 700;
			}
		}
		.show_address {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			padding-top: 25rpx;
			border-bottom: 5rpx dashed #b50e03;
			padding-bottom: 25rpx;
			text {
				text-align: center;
				font-size: 42rpx;
				flex: 1;
			}
			view {
				flex: 6;
				.info1 {
					text {
					}
				}
				.info2 {
				}
			}
		}
	}

	.goods_info {
		margin-top: 50rpx;
		.title {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			padding: 15rpx;
			image {
				height: 35rpx;
				width: 35rpx;
			}
			text {
				padding-left: 35rpx;
			}
		}
		.content {
			display: flex;
			margin: 10rpx 0 0 0;
			background-color: #fff;
			image {
				flex: 1;
				height: 205rpx;
				width: 205rpx;
			}
			.infos {
				flex: 3;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 20rpx;
				padding-top: 20rpx;
				text {
					line-height: 39rpx;
				}
				text:nth-child(1) {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				text:nth-child(2),
				text:nth-child(3) {
					color: #b50e03;
					font-size: 35rpx;
					padding-top: 10rpx;
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx;
					align-items: center;
					padding-left: 0;
					text {
					}
					.addBtn {
						display: flex;
						justify-content: center;
						align-items: center;
						text {
							padding: 0 20rpx;
						}
					}
				}
			}
		}
	}
	.bg-image{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.payment_info {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 90rpx;
		left: 0;
		padding: 0 20rpx;
		margin-top: 30rpx;
		text {
			flex: 4;
			text {
				color: #b50e03;
				font-size: 45rpx;
				padding-left: 15rpx;
			}
		}
		.payment_btn {
			flex: 3;
			padding: 35rpx;
			background-color: #b50e03;
			text-align: center;
			font-size: 35rpx;
			color: #ffffff;
		}
	}
}
</style>
